<template>
  <div>
    <Title title="环境监测"></Title>
    <div class="top_item">
      <div class="top_item1">
        <p v-if="weatherdata && weatherdata.length > 0">{{ weatherdata[0].tem_day }}℃</p>
        <div class="top_item2">
          <div :style="{ display: 'flex' }">
            <span v-if="weatherdata && weatherdata.length > 0">{{ weatherdata[0].wea }}</span>
            <div class="you">47优</div>
          </div>
          <div>24~26℃</div>
        </div>
        <div class="yujing">
          <div class="yuan"></div>
          <div :style="{ color: 'yellow', fontSize: '12px' }">高温黄色预警</div>
        </div>
      </div>
      <div class="top_item3">
        <div>
          <div>
            <i
              class="iconfont icon-wendu"
              :style="{ color: '#fff', fontSize: '20px', marginRight: '5px' }"
            ></i>
            <span
              :style="{ fontSize: '12px', color: '#fff' }"
              v-if="weatherdata && weatherdata.length > 0"
              >体感:{{ weatherdata[0].tem_day }}</span
            >
          </div>
          <div :style="{ fontSize: '12px', color: '#fff' }">31℃</div>
        </div>
        <div>
          <div>
            <i
              class="iconfont icon-fengli"
              :style="{ color: '#fff', fontSize: '20px', marginRight: '5px' }"
            ></i>
            <span
              :style="{ fontSize: '12px', color: '#fff' }"
              v-if="weatherdata && weatherdata.length > 0"
              >风力:{{ weatherdata[0].win }}</span
            >
          </div>
          <div :style="{ fontSize: '12px', color: '#fff' }">南风三级</div>
        </div>
        <div>
          <div>
            <i
              class="iconfont icon-shidu"
              :style="{ color: '#fff', fontSize: '20px', marginRight: '5px' }"
            ></i>
            <span
              :style="{ fontSize: '12px', color: '#fff' }"
              v-if="weatherdata && weatherdata.length > 0"
              >温度:{{ weatherdata[0].tem_day }}</span
            >
          </div>
          <div :style="{ fontSize: '12px', color: '#fff' }">34℃</div>
        </div>
      </div>
      <div class="top_item4">
        <div>
          <div class="tq">
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[0].tem_day }}~{{ weatherdata[0].tem_night }}℃
            </p>
            <i class="iconfont icon-yueliang"></i>
          </div>
          <div class="tq">
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[0].date }}
            </p>
            <div class="you">47优</div>
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[0].wea }}
            </p>
          </div>
        </div>
        <div class="top_item5">
          <div class="tq">
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[1].tem_day }}~{{ weatherdata[1].tem_night }}℃
            </p>
            <i class="iconfont icon-taiyang"></i>
          </div>
          <div class="tq">
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[1].date }}
            </p>
            <div class="you">47优</div>
            <p v-if="weatherdata && weatherdata.length > 0">
              {{ weatherdata[1].wea }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { getweather } from '../../request/index'
import Title from '../../components/commont/Title.vue'
const tigan = ref()
const fengli = ref()
const wendu = ref()
const weatherdata = ref()
// getweather().then((res) => {
//   // console.log(res,)
//   console.log('天气接口', res)
//   weatherdata.value = res.data.data
//   console.log(weatherdata.value)
// })
</script>

<style  lang="scss">
.tq .you {
  background: green;
  border-radius: 30px;
  font-size: 12px;
  width: 50px;
  line-height: 20px;
  margin-left: 6px;
  text-align: center;
  height: 20px;
}
.tq {
  display: flex;
  align-items: center;
  font-size: 20px;
  height: 40px;
  justify-content: space-around;
}
.top_item5 {
  border: none !important;
}
.top_item4 > div {
  font-size: 16px !important;
  color: #fff;
  width: 45%;
  height: 80px;
  border-right: 1px solid blue;
}
.top_item4 {
  font-size: 16px !important;
  border: 1px solid blue;
  background: #172e6d;
  height: 120px;
  margin-top: 15px;
  margin-left: 18px;
  display: flex;
  margin-right: 25px;
  align-items: center;
  justify-content: space-around;
}
.top_item3 > div {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  margin-left: 20px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid blue;
  margin-right: 20px;
}
.top_item3 {
  font-size: 16px;
  border: 1px solid blue;
  background: #172e6d;
  height: 183px;
  margin-left: 18px;
  margin-right: 25px;
}
.yujing {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yujing .yuan {
  font-size: 16px;
  width: 20px;
  display: inline-block;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  background: yellow;
}
.top_item2 .you {
  background: green;
  border-radius: 30px;
  font-size: 12px;
  width: 50px;
  line-height: 20px;
  margin-left: 6px;
  text-align: center;
  height: 20px;
}
.top_item2 {
  font-size: 16px;
  color: #fff;
}
.top_item1 {
  font-size: 16px;
  height: 80px;
  margin-left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // background: #fcc;
}
.top_item1 p {
  color: #fff;
  font-size: 43px;
}

.top_item {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 410px;
  background: #0c1d5f;
}
</style>